<template>
    <div>
       <table class="stu-table">
            <tr>
                <th>
                    书籍ID
                </th>
                <th>
                    书名
                </th>
               
                
                <th>
                   作者
                </th>
                <th>
                   出版社
                </th>
                 <th>
                    类型
                </th>
                <th>
                    出版日期
                </th>
                <th>
                    ISBN
                </th>
                <th>
                    库存
                </th>
                <th>
                    操作
                </th>

            </tr>
            <tr v-for="(book) in books" :key="book.id">
                <th>
                    {{book.id}}
                </th>
                <th>
                    {{book.bookName}}
                </th>
               
                
                <th>
                {{book.author}}
                </th>
               
                <th>
                   {{book.press}}
                </th>
                 <th>
                    {{book.type}}
                </th>
                <th>
                    {{book.birthday}}
                </th>
                <th>
                    {{book.ISBN}}
                </th>
                <th>
                    {{book.sum}}
                </th>
                <td>
                    <button @click="upbook(book.id)"  >修改</button>
                    <button @click="dele(book.id)" >删除</button>
                </td>

            </tr>

        </table>
        <div class="page">
           <el-pagination
            @size-change ="sizeChange"
             @current-change ="nowpage"
             :hide-on-single-page ="true"
                background
                :page-size="10"
                :current-page="curPage"
                layout="prev, pager, next"
                :total="count">
          </el-pagination>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            books:null,
            count:null,
            curr:1

        }
    },
    computed:{
       curPage(){
           return   this.curr;
        }
    },
    methods:{
        upbook(id){//跳转到书籍修改界面
            this.$router.push({name:"bookUp",query:{
            id
        }});
        },
        async dele(id){//删除书籍
            const result = await this.$axios.delete("/api/admin/deleBook",{
            params:{
                id
            }
          });
          if(result){
              this.$message({
                      showClose: true,
                      message: '删除成功！',
                      type: 'success'
                });
          const re =  await this.$axios.get("/api/admin/getbooks",{
                            params:{
                            page:this.curr,
                            }
                                  })
            this.books = re.rows;
            this.count = re.count; 
          }else{
              this.$message({
                      showClose: true,
                      message: '删除失败！',
                      type: 'error'
                });
          }
        },
        sizeChange(){

        },
       async nowpage(cur){
        this.curr = cur;
        const result = await this.$axios.get("/api/admin/getbooks",{
            params:{
                page:cur,
            }
        });

        this.books = result.rows;
        this.count = result.count;

           
        }
    },
    async created(){
        const result = await this.$axios.get("/api/admin/getbooks");
        this.books = result.rows;
        this.count = result.count;
    
    }
}
</script>
<style lang="less">

</style>